<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XMLHttpRequest-基础使用</title>
</head>
<body>
    <p class="list">
        <!-- 把数据渲染到这里 -->
    </p>

    <script>
        /*
            需求：XMLHttpRequest获取省份数据，渲染到页面上
        */
        // 1. 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest()
        
        // 2. 设置请求方法 和 请求URL
        xhr.open('get', 'https://hmajax.itheima.net/api/province') 

        // 3. 监听 loadend 事件， 接收响应结果
        xhr.addEventListener('loadend',() =>{
            // console.log(xhr.response)

            // JSON --> JS对象
            const data = JSON.parse(xhr.response)
            console.log(data)
            
            // 渲染到页面上
            document.querySelector('.list').innerHTML = data.list
        })
        // 4.发送请求
        xhr.send()
    </script>
</body>
</html>